 {include file="public/user_header" title="在线充值" /}
<!-- Content -->
            <div class="container-xxl flex-grow-1 container-p-y">

              <div class="row">
                <div class="col-md-12">
                    <?php if ($recharge != 'no'): ?>
                    <div class="card mb-4">
                        <h5 class="card-header">在 线 充 值</h5>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                          <form id="recharge" class="row g-3"  method="post" action="/Deal/DoPay">
                                <label style="color:red" >账户余额：{$user.money}</label>
                            <div class="col-12">
                              <label class="form-label w-100">充 值 金 额</label>
                              <div class="input-group input-group-merge">
                                <input
                                  name="money"
                                  id = "numeral-mask"
                                  class="form-control"
                                  type="text"
                                  value="100"
                                  placeholder="请输入充值金额"
                                />
                              </div>
                            </div>
                                <div class="col-12">
                                <label class="form-label w-100" for="paymentCard">充 值 方 式</label>
                                <?php foreach ($recharge as $key => $value): if($value['isOpen'] == 'yes'): ?>
                                    <div class="form-check form-check-inline">
                                    <input
                                      name="type"
                                      class="form-check-input"
                                      type="radio"
                                      value="{$value['id']}"
                                    />
                                    <label class="form-check-label" for="collapsible-payment-cc">{$value['name']}</label>
                              </div>
                                <?php endif; endforeach; ?>
                            </div>
                            <div class="col-12 mt-3">
                              <button id="rechargeButton" type="submit" class="btn btn-primary me-sm-3 me-1">立 即 充 值</button>
                            </div>
                            
                          </form>
                        </div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                  <div class="card">
                    <!-- 余 额 日 志 -->
                    <h5 class="card-header border-bottom">余 额 日 志</h5>
                    <div class="card-datatable text-nowrap">
                      <table class="datatables-basic table border-top">
                        <thead>
                          <tr>
                            <th>#ID</th>
                            <th>商户ID</th>
                            <th>变更金额</th>
                            <th>变更前金额</th>
                            <th>变更后金额</th>
                            <th>变更类型</th>
                            <th>变更时间</th>
                          </tr>
                        </thead>
                      </table>
                    </div>
                    <!--/ 余 额 日 志 -->
                  </div>
                </div>
              </div>
            </div>
            <!-- / Content -->
            
{include file="public/user_footer" /}

 <!-- / Page Js -->
<script>
    layui.use([ 'form'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            //验证输入的充值金额是否为数字
            const numeralMask = document.querySelector('#numeral-mask')
              //Numeral
            if (numeralMask) {
              new Cleave(numeralMask, {
                numeral: true,
                numeralThousandsGroupStyle: 'false'
              });
            }
            
            //判断是否输入充值金额和选择充值类型
            const recharge = document.querySelector('#recharge'),
            rechargeButton = document.querySelector('#rechargeButton');
            
            if (recharge) {
                const fv = FormValidation.formValidation(recharge, {
                  fields: {
                    money: {
                      validators: {
                        notEmpty: {
                          message: '请 输 入 你 要 充 值 的 金 额'
                        }
                      }
                    },
                    type: {
                      validators: {
                        notEmpty: {
                          message: '请 选 择 充 值 方 式'
                        }
                      }
                    }
                  },
                  plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap5: new FormValidation.plugins.Bootstrap5({
                      eleValidClass: ''
                    }),
                    submitButton: new FormValidation.plugins.SubmitButton(),
                    fieldStatus: new FormValidation.plugins.FieldStatus({
                      onStatusChanged: function (areFieldsValid) {
                        areFieldsValid
                          ? // Enable the submit button
                            // so user has a chance to submit the form again
                            rechargeButton.removeAttribute('disabled')
                          : // Disable the submit button
                            rechargeButton.setAttribute('disabled', 'disabled');
                      }
                    }),
                    // Submit the form when all fields are valid
                    defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    autoFocus: new FormValidation.plugins.AutoFocus()
                  },
                  init: instance => {
                    instance.on('plugins.message.placed', function (e) {
                      if (e.element.parentElement.classList.contains('input-group')) {
                        e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
                      }
                    });
                  }
                });
              }
  
            var dt_basic_table = $('.datatables-basic');

            // DataTable
            // --------------------------------------------------------------------
            if (dt_basic_table.length) {
               dt_basic = dt_basic_table.DataTable({
                 ajax: '/Deal/Moneylog',
                 columns: [
                   { data: 'id' },
                   { data: 'user_id' },
                   { data: 'money' },
                   { data: 'beforemoney' },
                   { data: 'after' },
                   { data: 'memo' },
                   { data: 'create_time' },
                 ],
                 order: [[0, 'desc']],
                 dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                 displayLength: 10,
                 lengthMenu: [10, 20, 50],
                 scrollX: true,
            });
            }
    });
</script>